<template>
    <div class="login-main">
        <el-form>
          <el-form-item label="账号">
            <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="loginForm.password" @keyup.enter="login" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="login-button" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script setup>

import {onMounted, reactive} from "vue";
import router from "@/router";
import {ipc, isEE} from "@/utils/ipcRenderer";
import {ElMessage} from "element-plus";

const loginForm = reactive({
  username: 'admin',
  password: 'a'
})

const login = () => {

  if(loginForm.username === 'admin' && loginForm.password === 'a') {
    router.replace({
      name: 'Home'
    });
    isEE && ipc.invoke('controller.example.mainWindowOpen')
  } else {
    ElMessage({
      type: 'error',
      message: '账号密码错误，请重试'
    })
  }
}

onMounted(() => {
  isEE && ipc.invoke('controller.example.loginWindowOpen')
})
</script>

<style lang="less" scoped>
.login-main {
  padding: 50px;
  height: calc(100vh - 100px);
  background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}
.login-button {
  width: 100%;
}
</style>
